<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>透传attribute</title>
        <style>
            v-cloak { display: none; }
            .root { border: 1px solid gray; }
            .wrapper { border: 1px solid blue ; margin: 10px; }
            .wrapper>* { margin: 10px; }
            .panda { font-size: 2rem; }
            .odd { background: #dfdfdf; }
            .even { background: #ff7033; }
            #first { color: blue; }
            #second { color: purple; }
        </style>
    </head>
    <div>

        <h3>透传attribute</h3>

        <div id="app" v-cloak></div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>

            const Panda = {
                props: [ 'name' ],
                emits: [ '输入' ],
                template: `<div class="wrapper">
                                <input type="text" 
                                        :value="name" 
                                        @input="$emit('输入', $event.target.value)" 
                                        placeholder="请输入熊猫名字">
                                <p>{{name}}</p>
                           </div>`,
                beforeCreate() {
                    console.log( this.$attrs );
                }
            }


            const root = {
                components: {
                    Panda
                },
                template: `<div class="root">
                                <Panda :name="pandaName" 
                                       class="panda odd" 
                                       id="first" 
                                       @输入="input"
                                       @click="show" >
                                </Panda>
                                <Panda :name="pandaName" 
                                       class="panda even" 
                                       id="second" 
                                       @输入="input"
                                       @click="show" >
                                </Panda>
                           </div>`,
                data() {
                    return {
                        pandaName: '大美'
                    }
                },
                methods: {
                    input(value) {
                        this.pandaName = value;
                    },
                    show() {
                        alert( this.pandaName );
                    }
                }
            }

            Vue.createApp(root).mount( '#app' );
        </script>
    </div>
</html>